<template>
	<view class="content">
		<view class="postList" v-if="postList&&postList.length>0">
			<scroll-view show-scrollbar="false" scroll-y="true" :scroll-top="scrollLeftTop"
				scroll-with-animation="true">
				<view class="listItem" :id="'listItem'+(index+1)" v-for="(item,index) in postList" :key="item.id"
					@click="goDetail(item.id)">
					<view class="topBox">
						<view class="dateTime">
							{{item.createTime}} 发布
						</view>
						<view class="operation" @click.stop="openOperate(item.id)">
							<image src="../../static/minePost/more.png" mode=""></image>
						</view>
					</view>
					<view :class="['contentBox',item.isShow === false?'notShow':'']">
						<!-- <view class="text"> -->
						{{item.text}}
						<!-- <view class="video_wrap" v-if="item.video&& item.isShow !== false">

							<ls-dom-video ref="domVideo" class="video-item" object-fit="contain" :controls="true"
								:show-progress="false" :show-fullscreen-btn="false" :show-play-btn="false"
								:show-bottom-progress="false" :autoplay="false" :src="item.video"></ls-dom-video>
						</view>
						<view class="imgs" v-if="item.photoList.length!==0 && item.isShow !== false">
							<view class="imgsItem" v-for="(item1,index1) in item.photoList" :key="index1"
								@click.stop="onShowImg(item.photoList,index1)">
								<image :src="item1" mode="widthFix"></image>
							</view>
						</view> -->
						<!-- </view> -->
						<view v-if="item.text.length>80" :class="['more',item.isShow=== true?'Showing':'']"
							@click.stop="changeShow(item,index)">
							{{item.isShow=== true?'收起':'展开'}}
						</view>
					</view>
					<view class="imgAndVid">
						<!-- viewImgs(item.video,'video') -->
						<view class="vidsItem" v-show="item.video" @click.stop="viewImgs(item.video,'video')">
							<image class="bg" :src="item.videoCover" mode="aspectFill">
							</image>
							<view class="mark">

							</view>
							<image class="play" src="../../static/minePost/play.png" mode=""></image>
						</view>
						<view class="imgs" v-if="item.photos&&item.photos.length>0">

							<!-- <view class="imgsItem" v-for="(item1,index1) in item.photos" :key="index1">
								<image :src="item1" mode="aspectFill" @click.stop="onShowImg(item.photos,index1)">
								</image>
							</view> -->

							<view class="imgsItem" v-for="(item1,index1) in item.showPhotos" :key="index1">
								<image :src="item1" mode="aspectFill" @click.stop="onShowImg(item.photos,index1)">
								</image>
								<view class="more_wrap" v-if="item.photos.length>2 && index1==1">
									<image src="../../static/square/more.png" mode="widthFix" class="more"></image>
									<view class="img_num">
										+{{item.photos.length-2}}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="rightBox">
						<view class="favorite">
							<image :src="`../../static/postDetail/${item.useFavorite==1?'favorited':'favorite'}.png`"
								mode="" @click.stop="onLikeOrDisLike(item.id,item.useFavorite)">
							</image>
							{{item.favoriteNum}}
						</view>
						<view class="comment">
							<image src="../../static/postDetail/comm.png" mode=""></image>
							{{item.commentNum}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="nullData" v-else>
			<image src="../../static/follow/follow1.png" mode="widthFix"></image>
			<view class="txt">
				还没有发动态呢，赶快行动起来~
			</view>
		</view>
		<u-overlay :show="modalShow" @click="modalShow = false">
			<view class="warp-lay">
				<!-- <view class="rect" @tap.stop></view> -->
				<view class="followConfirm">
					<view class="txt">
						确认删除帖子吗?
					</view>
					<view class="btnGroup">
						<view class="btn cancel" @click="modalShow = false">
							取消
						</view>
						<view class="btn confirm" @click="deletePost">
							确认
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
		<uni-popup ref="popup" type="bottom" border-radius="30rpx 30rpx 0 0" background-color="#fff">

			<view class="delete" @click="openOverlay">
				删除
			</view>
			<!-- <view class="edit">
				编辑
			</view> -->
			<view class="cancel" @click="closeModal">
				取消
			</view>
		</uni-popup>
		<imageViewer ref="imageViewerRef" :lists="iVlists" :types="viewType" :show.sync="viewShow"></imageViewer>
	</view>
</template>

<script>
	import imageViewer from '@/components/imagesViewer/imagesViewer.vue'
	import {
		getMinePostList
	} from "@/api/post.js";
	import {
		mapState,
		mapMutations
	} from "vuex";
	import {
		addComment,
		addLike,
	} from "@/api/apis.js"
	import {
		delPost,
	} from "@/api/post.js";
	export default {
		components: {
			imageViewer,
		},
		data() {
			return {
				// postList: [{
				// 	id: 1,
				// 	url: [
				// 		'https://p3-pc-sign.douyinpic.com/tos-cn-i-dy/a826e4566c614abb989664b943498989~tplv-dy-aweme-images-v2:3000:3000:q75.webp?biz_tag=aweme_images&from=327834062&s=PackSourceEnum_AWEME_DETAIL&sc=image&se=false&x-expires=1724821200&x-signature=57XcoVUhwV8%2FUubGuDdCjqE8lv0%3D'
				// 	],
				// 	date: "2024-04-12",
				// 	time: "12:24",
				// 	content: "基本上是一天一斤的掉，就是少吃，主要是挑饱腹感强的食物来吃，早上俩鸡蛋一杯咖啡或牛奶，中午牛肉+-拳蔬菜+半根玉米或者红薯，牛肉超级扛饿，晚上不吃也不会觉得饿，睡前带着一丢丢饥饿感就睡了，呵呵呵呵呵呵呵恩",
				// 	isShow: false
				// }, {
				// 	id: 2,
				// 	url: ['https://picx.zhimg.com/70/v2-8f88dcec47487aee6cc3168c68abe0dc_1440w.avis?source=172ae18b&biz_tag=Post',
				// 		'https://pic2.zhimg.com/80/v2-e5b1256ab4a510c4f8dbfa1af0eb12d5_720w.webp'
				// 	],
				// 	date: "2024-04-12",
				// 	time: "12:24",
				// 	content: "基本上是一天一斤的掉，就是少吃，主要是挑饱腹感强的食物来吃，早上俩鸡蛋一杯咖啡或牛奶，中午牛肉+-拳蔬菜+半根玉米或者红薯，牛肉超级扛饿，晚上不吃也不会觉得饿，睡前带着一丢丢饥饿感就睡了，呵呵呵呵呵呵呵恩",
				// 	isShow: false
				// }, {
				// 	id: 3,
				// 	url: ['https://api.fang-cun.net/storage/upload/users/3PPW/1664436938L1WOdjmzPv.png'],
				// 	date: "2024-04-12",
				// 	time: "12:24",
				// 	content: "基本上是一天一斤的掉，就是少吃，主要是挑饱腹感强的食物来吃，早上俩鸡蛋一杯咖啡或牛奶，中午牛肉+-拳蔬菜+半根玉米或者红薯，牛肉超级扛饿，晚上不吃也不会觉得饿，睡前带着一丢丢饥饿感就睡了，呵呵呵呵呵呵呵恩",
				// 	isShow: false
				// }, ],
				postList: [],
				// viewImg: '',
				viewShow: false,
				viewType: '',
				iVlists: [],
				scrollLeftTop: 0,
				realTop: 0,
				modalShow: false,
				detailId: ''
			};
		},
		computed: {
			...mapState("userInfo", ["Info", 'storeId']),
		},
		methods: {
			// 取消
			closeModal() {
				this.$refs.popup.close()
			},
			onLikeOrDisLike(id, state) {
				let params = {
					bizId: id,
					bizType: '0',
					liked: state == 0 || state == null ? true : false
				}

				console.log(params, 'paramsparams')
				addLike(params).then(res => {
					console.log(res);
					if (res.success) {
						this.getPostList()
					}
				})
			},
			openOverlay() {
				this.modalShow = true
			},
			deletePost() {
				delPost({
					id: this.detailId
				}).then(res => {
					if (res.success) {
						uni.showToast({
							title: '删除成功',
							duration: 2000
						});
						this.getPostList()
						this.$refs.popup.close()
					}
				})
			},
			goDetail(id) {
				// console.log(id,'ididid')
				// return
				uni.navigateTo({
					url: `/pages/postDetail/postDetail?id=${id}`
				})
			},
			openOperate(id) {
				this.detailId = id
				this.$refs.popup.open()
			},
			// 预览图图片
			onShowImg(item, index) {
				uni.previewImage({
					current: index,
					urls: item,
				})
			},
			// 废案
			viewImgs(list, type) {
				if (type == 'video') {
					list = [{
						url: list,
						poster: `${list}?x-oss-process=video/snapshot,t_1,f_jpg`
					}]
				}
				if (type == 'image') {
					let arr = []
					list.map(item => {
						arr.push({
							url: item
						})
					})
					list = JSON.parse(JSON.stringify(arr))
				}
				// console.log(list, 'list');
				// return
				this.iVlists = list
				this.viewType = type
				this.viewShow = true
			},
			// 展开记录位置，收起滚动回去
			changeShow(item, index) {
				item.isShow = !item.isShow
				console.log(index, 'i')
				let that = this
				const query = uni.createSelectorQuery().in(this);
				if (item.isShow) {
					query.select(`#listItem${index+1}`).boundingClientRect(data => {
						if (data) {
							// data.top就是元素距离顶部的高度
							console.log('元素距离顶部的高度:', data.top);
							that.realTop = data.top
						}
					}).exec();
				} else {
					query.select(`#listItem${index+1}`).boundingClientRect(data => {
						if (data) {
							that.scrollLeftTop = that.realTop
							// console.log(that.scrollLeftTop,'that.scrollLeftTop')
						}
					}).exec();
				}
			},
			getPostList() {
				getMinePostList({
					customerId: this.Info.id
				}).then((res) => {
					console.log(res);
					if (res.success) {
						console.log(res);
						// this.fansList = res.result.fallowsList
						res.result.map(item => {
							item.isShow = false
							if (item.picture) {
								item.photos = JSON.parse(item.picture)
								item.showPhotos = item.photos.slice(0, 2)
							}
							// item.videoList=[]
							if (item.video) {
								item.videoCover = `${item.video}?x-oss-process=video/snapshot,t_1,f_jpg`
								console.log(item.videoCover, 'res.result.videoCover')
								// item.videoList.push(item.video)
							}
						})

						this.$set(this, "postList", res.result)
						// this.postList = res.result
						console.log(this.postList, 'this.postList ')
					} else {}
				});
			}
		},
		mounted() {
			// this.getPostList()
		},
		onShow() {
			this.getPostList()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		// height: 100vh;
		// background-color: #FDE9BF; 
		// padding: 25rpx;
		padding-bottom: 30rpx;

		.postList {
			padding: 30rpx;

			.listItem {
				font-size: 35rpx;
				// margin-bottom: 20rpx;
				// height: 350rpx;
				margin-bottom: 80rpx;

				.topBox {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 15rpx;

					.dateTime {
						color: #979797;
						font-size: 30rpx;
					}

					.operation {
						width: 25rpx;
						height: 25rpx;

						image {
							display: block;
							width: 100%;
							height: 100%;
						}
					}
				}

				.contentBox {
					// .txt{}
					position: relative;
					font-size: 32rpx;
					letter-spacing: 2rpx;
					line-height: 45rpx;
					// word-break: break-all;
					word-break: break-word;



					// // 视频
					// .video_wrap {
					// 	margin: 24rpx 0;
					// 	text-align: center;

					// 	.video-item {
					// 		z-index: 1;
					// 	}
					// }

					.more {
						// display: inline-block;
						position: absolute;
						bottom: 0;
						right: 0;
						background-color: #fff;
						color: #4B7DFF;

						&::before {
							position: absolute;
							right: 100%;
							content: "";
							width: 142rpx;
							height: 44rpx;
							background-image: linear-gradient(270deg, #fff, hsla(0, 0%, 100%, 0.2));
						}
					}

					.Showing {
						position: inherit;

						&::before {
							position: inherit;
							content: "";
							width: 0;
							height: 0;
							background-image: none;
						}
					}
				}

				.imgAndVid {
					margin-top: 25rpx;

					.vidsItem {
						border-radius: 10rpx;
						overflow: hidden;
						margin-bottom: 20rpx;
						margin-right: 20rpx;
						width: 180rpx;
						height: 180rpx;
						position: relative;

						.bg {
							width: 100%;
							height: 100%;
							display: block;
						}

						.mark {
							position: absolute;
							top: 0;
							bottom: 0;
							left: 0;
							right: 0;
							width: 100%;
							height: 100%;
							margin: auto;
							display: block;
							background-color: rgba(0, 0, 0, 0.2);
						}

						.play {
							position: absolute;
							top: 0;
							bottom: 0;
							left: 0;
							right: 0;
							width: 90rpx;
							height: 90rpx;
							margin: auto;
							display: block;
						}
					}

					.imgs {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						flex-wrap: wrap;
					
						.imgsItem {
							border-radius: 10rpx;
							overflow: hidden;
							margin-bottom: 20rpx;
							margin-right: 20rpx;
							width: 260rpx;
							height: 260rpx;
							position: relative;
					
							image {
								width: 100%;
								height: 100%;
								display: block;
							}
					
							.more_wrap {
								position: absolute;
								display: flex;
								bottom: 12rpx;
								right: 12rpx;
								z-index: 1;
								width: 68rpx;
								height: 28rpx;
								background: #000000;
								border-radius: 4rpx;
								opacity: 0.6;
								padding: 4rpx 8rpx;
								justify-content: space-between;
								align-items: center;
								overflow: hidden;
					
								.more {
									height: 20rpx;
									width: 20rpx;
								}
					
								.img_num {
									color: #fff;
									font-size: 20rpx;
								}
							}
						}
					
					
					}
				}

				.rightBox {
					margin-top: 30rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.favorite {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						color: #BABABA;
						font-size: 28rpx;
						margin-right: 50rpx;

						image {
							width: 50rpx;
							height: 50rpx;
							display: block;
							margin-right: 10rpx;
						}
					}

					.comment {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						color: #BABABA;
						font-size: 28rpx;

						image {
							width: 50rpx;
							height: 50rpx;
							display: block;
							margin-right: 10rpx;
						}
					}
				}

				.notShow {
					// height: 300rpx;
					// overflow: hidden;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 4;
					-webkit-box-orient: vertical;
					// word-break: break-all;
					word-break: break-word;



				}
			}
		}

		.nullData {
			width: 100%;
			margin-top: 300rpx;

			image {
				width: 35%;
				margin: 0 auto;
				display: block;
			}

			.txt {
				text-align: center;
				color: #8C8EA0;
				font-size: 30rpx;
				margin-top: 20rpx;
			}
		}

		.edit,
		.delete,
		.cancel {
			padding: 30rpx 0;
			text-align: center;
		}

		.edit {
			margin: 0 30rpx;
		}

		.delete {
			margin: 0 30rpx;
			border-bottom: 1rpx solid #D9D9D9;
			color: $uni-text-color-red;
		}

		.cancel {
			border-top: 12rpx solid #EDEDED;
		}

		.warp-lay {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.followConfirm {
				width: 70%;
				// height: 250rpx;
				padding: 45rpx 45rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx;

				.txt {
					text-align: center;
					margin-bottom: 45rpx;
				}

				.btnGroup {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					.btn {
						padding: 18rpx 0rpx;
						border-radius: 35rpx;
						border: 0;
						font-size: 26rpx;
						width: 46%;
						text-align: center;
					}

					.cancel {
						background-color: #EDEDED;
						color: #4D4D4D;
					}

					.confirm {
						background-image: linear-gradient(to right, #FF4C6E, #FE2C55);
						color: #fff;
					}
				}
			}
		}

	}
</style>